<template>
  <view class="page-container">
    <view class="header">
      <image class="ai-doctor-avatar" src="/static/images/AiDoctor.png" mode="aspectFit"></image>
      <text class="title">AI智能问诊</text>
      <text class="subtitle">专业医疗AI助手，为您解答健康问题</text>
    </view>

    <view class="input-section">
      <textarea
        class="question-input"
        placeholder="请详细描述您的症状或健康问题..."
        v-model="msg"
        :maxlength="500"
        show-confirm-bar="false"
      ></textarea>
      <view class="button-group">
        <button
          class="action-button"
          :disabled="isLoading || !msg.trim()"
          @click="sendMsg"
        >
          <text v-if="!isLoading">发送问题</text>
          <view v-else class="loader"></view>
        </button>

      </view>
    </view>

    <view v-if="isLoading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">AI医生正在思考，请稍候...</text>
    </view>

    <view class="content-area">
      <view v-if="answer" class="answer-container">
        <view class="section-title">
          <text class="title-text">AI医生回答</text>
        </view>
        <view class="answer-content">
          <text>{{ answer }}</text>
        </view>
      </view>


    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      msg: '',
      answer: '',
      isLoading: false
    }
  },
  
  methods: {
    // 发送消息
    async sendMsg() {
      if (!this.msg.trim()) {
        uni.showToast({
          title: '请输入问题',
          icon: 'none'
        })
        return
      }

      this.isLoading = true
      
      
      
      // 真实API模式
      try {
        const response = await uni.request({
          url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions',
          method: 'POST',
          header: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer sk-c7c05a0de20e417f8b46afb3c86efb9e'
          },
          data: {
            model: 'qwen-plus',
            messages: [
              {
                role: 'system',
                content: '你是一个专业的AI医生，请根据用户描述的症状或健康问题，提供专业、准确、易懂的医疗建议，不要列表格。注意：你的回答仅供参考，不能替代专业医生的诊断。',
              },
              {
                role: 'user',
                content: this.msg,
              },
            ],
          }
        })
        
        console.log('完整响应:', response)
        console.log('响应数据:', response.data)
        
        // 检查响应状态
        if (response.statusCode !== 200) {
          throw new Error(`HTTP错误: ${response.statusCode}`)
        }
        
        // 检查响应数据结构
        if (!response.data) {
          throw new Error('响应数据为空')
        }
        
        // 检查是否有错误信息
        if (response.data.error) {
          throw new Error(`API错误: ${response.data.error.message || response.data.error}`)
        }
        
        // 检查choices数组
        if (!response.data.choices || !Array.isArray(response.data.choices) || response.data.choices.length === 0) {
          throw new Error('响应格式错误: 缺少choices数组')
        }
        
        const choice = response.data.choices[0]
        if (!choice.message || !choice.message.content) {
          throw new Error('响应格式错误: 缺少message.content')
        }
        
        this.answer = choice.message.content
        uni.showToast({
          title: 'AI回答完成',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('发送消息失败:', error)
        console.error('错误详情:', error.message)
        
        let errorMessage = '发送失败，请重试'
        if (error.message.includes('API错误:')) {
          errorMessage = error.message.replace('API错误:', '')
        } else if (error.message.includes('HTTP错误:')) {
          errorMessage = `网络错误: ${error.message}`
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 3000
        })
      } finally {
        this.isLoading = false
      }
    },

    

    
  }
}
</script>

<style scoped>
.page-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  padding: 30rpx 0;
}

.ai-doctor-avatar {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 20rpx;
  border-radius: 60rpx;
  box-shadow: 0 8rpx 24rpx rgba(65, 105, 225, 0.2);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}



.input-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.question-input {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  border: 2rpx solid #e1e5e9;
  border-radius: 16rpx;
  font-size: 32rpx;
  line-height: 1.6;
  background: #fafbfc;
  transition: all 0.3s ease;
}

.question-input:focus {
  border-color: #4169e1;
  background: #fff;
  box-shadow: 0 0 0 6rpx rgba(65, 105, 225, 0.1);
}

.button-group {
  display: flex;
  gap: 20rpx;
}

.action-button {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #4169e1, #5b7cfa);
  color: #fff;
}

.action-button:active {
  transform: scale(0.98);
}

.action-button[disabled] {
  background: #ccc;
  opacity: 0.6;
}



.loading-container {
  text-align: center;
  padding: 60rpx 0;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #4169e1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.content-area {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.answer-container {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.title-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.answer-content {
  line-height: 1.8;
  color: #333;
  font-size: 30rpx;
}



.loader {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto;
}
</style>
